<template>
	<view class="control">
		<van-tabs :active="active" animated @click="onClick">
			<van-tab title="待审批">
				<view class="list" v-if="Auditlist.length">
					<view class="item" v-for="(item,index) in Auditlist" :key="index" @click="openDetail(item,index)">
						<view>
							<view class="item-title">{{item.model}}</view>
							<view class="detail">
								{{item.content}}
							</view>
						</view>
						<view class="flex-space-between">
							<view class="flex">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
								<text class="time">{{item.apply_user_name}}</text>
							</view>
							<view class="time ti">
								{{item.create_at}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else mode="" text="数据为空"
					icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
			</van-tab>
			<van-tab title="已通过">
				<view class="list" v-if="passlist.length">
					<view class="item" v-for="(item,index) in passlist" :key="index" @click="openDetail(item,index)">
						<view>
							<view class="item-title">{{item.model}}</view>
							<view class="detail">
								{{item.content}}
							</view>
						</view>
						<view class="flex-space-between">
							<view class="flex">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
								<text class="time">{{item.apply_user_name}}</text>
							</view>
							<view class="time ti">
								{{item.create_at}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else mode="" text="数据为空"
					icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
			</van-tab>
			<van-tab title="未通过">
				<view class="list" v-if="passlist.length">
					<view class="item" v-for="(item,index) in passlist" :key="index" @click="openDetail(item,index)">
						<view>
							<view class="item-title">{{item.model}}</view>
							<view class="detail">
								{{item.content}}
							</view>
						</view>
						<view class="flex-space-between">
							<view class="flex">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1b17f37fac7f668a8c3fcb692915b2e59a0236d.png" />
								<text class="time">{{item.apply_user_name}}</text>
							</view>
							<view class="time ti">
								{{item.create_at}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else mode="" text="数据为空"
					icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				active: 0,
				Auditlist: [],
				passlist: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
			}
		},
		onLoad(query) {
			// status 1 通过  2 拒绝
			this.active = parseInt(query.state)
			if (this.active == 0) {
				this.waitAudit()
			} else if (this.active == 1) {
				this.status = this.active
				this.pass_and_nopass()
			} else if (this.active == 2) {
				this.status = this.active
				this.pass_and_nopass()
			}
		},
		methods: {
			async waitAudit() {
				let that = this;
				let params = {};
				let res = await personal.waitAudit(params);
				if (res.code == 1) {
					this.Auditlist = res.data
				}
			},
			async pass_and_nopass() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let params = {
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					status: this.status
				};
				let res = await personal.pass_and_nopass(params);
				if (res.code == 1) {
					that.passlist = that.passlist.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.data.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.pass_and_nopass()
			},
			onClick(index) {
				this.Auditlist = []
				this.passlist = []
				if (index.detail.index == 0) {
					this.waitAudit()
				} else if (index.detail.index == 1) {
					this.status = index.detail.index
					this.pass_and_nopass()
				} else if (index.detail.index == 2) {
					this.status = index.detail.index
					this.pass_and_nopass()
				}
			},
			openDetail(item, index) {
				uni.navigateTo({
					url: `/page_admin/approval-admin/approval-process?id=${item.id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		background-color: #f3f3f3;
		height: 100vh;
	}

	.list {
		height: calc(100vh - 60px);
		overflow: auto;

		padding: 30rpx 30rpx;

		.item {
			margin-bottom: 20rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 2rpx 6.86rpx 0.14rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			padding: 29rpx 18rpx 30rpx 30rpx;
			height: 280rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.item-title {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 24rpx;
			}

			.detail {
				line-height: 34rpx;
				color: rgb(102, 102, 102);
				font-size: 26rpx;
				font-weight: 500;
			}

			image {
				width: 18rpx;
				height: 19rpx;
				margin-right: 11rpx;
			}

			.time {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
			}

			.ti {
				font-weight: 700;
			}
		}
	}
</style>